<template>
  <div ref="a-c" class="content">
    <canvas ref="canvas"></canvas>
  </div>
</template>

<script>
import {bus} from "@/lib/bus"; // 引入消息总线

export default {
  name: 'TimeComponent',
  data() {
    return {
      height: 0,
      width: 0,
      minSize: 0,
      fontColor: '#fff',
      shadowColor: '#ccc',
    }
  },
  components: {},
  methods: {
    drawTimeTxt(ctx, x, y, i) {
      if (i === 0) i = 12
      ctx.save()
      ctx.beginPath()
      ctx.font = this.minSize * 0.08 + 'px Arial';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillStyle = this.fontColor
      ctx.shadowColor = this.fontColor
      ctx.fillText(i, x, y);
      ctx.closePath()
      ctx.restore()
    },
    drawTimeNeedle(ctx, lineW, L, angel, color) {
      let [x, y] = [this.minSize / 2 + Math.cos(angel) * L, this.minSize / 2 + Math.sin(angel) * L]
      ctx.save()
      ctx.beginPath()
      ctx.shadowOffsetX = 0; // 设置水平位移
      ctx.shadowOffsetY = 0; // 设置垂直位移
      ctx.shadowBlur = 5; // 设置模糊度
      ctx.shadowColor = this.shadowColor
      ctx.lineWidth = lineW;
      ctx.lineCap = "round";
      ctx.strokeStyle = color
      ctx.moveTo(x, y);
      ctx.lineTo(this.minSize / 2, this.minSize / 2);
      ctx.stroke()
      ctx.closePath()
      ctx.restore()
    },
    drawSecondDotted(ctx, angel, color) {
      let L = this.minSize * 0.06
      let [x, y] = [this.minSize / 2 + Math.cos(angel) * L, this.minSize / 2 + Math.sin(angel) * L]
      ctx.save()
      ctx.beginPath()
      ctx.fillStyle = color
      ctx.arc(x, y, this.minSize * 0.02, 0, 360 * Math.PI / 180)
      ctx.fill()
      ctx.closePath()
      ctx.restore()
    },
    drawTime() {
      let c = this.$refs.canvas
      if (!c) {
        return
      }
      let ctx = c.getContext('2d')

      let L = this.minSize / 2 * 0.85
      let [x1, y1] = [this.minSize / 2, this.minSize / 2]
      let L2 = L + this.minSize * 0.04
      let L3 = L + this.minSize * 0.02
      let L4 = L + this.minSize * 0.03
      let L5 = L - this.minSize * 0.1

      ctx.clearRect(0, 0, c.width, c.height)
      for (let i = 0; i < 12; i++) {
        let angel = -90 + i * 30
        let [x2, y2] = [x1 + Math.cos(angel * Math.PI / 180) * L, y1 + Math.sin(angel * Math.PI / 180) * L]
        let [x3, y3] = [x1 + Math.cos(angel * Math.PI / 180) * L2, y1 + Math.sin(angel * Math.PI / 180) * L2]
        let [x4, y4] = [x1 + Math.cos(angel * Math.PI / 180) * L5, y1 + Math.sin(angel * Math.PI / 180) * L5]
        ctx.save()
        ctx.beginPath()
        ctx.lineWidth = this.minSize * 0.02;
        ctx.lineJoin = "round";
        ctx.strokeStyle = this.fontColor;
        ctx.moveTo(x2, y2);
        ctx.lineTo(x3, y3);
        ctx.closePath()
        ctx.stroke()
        ctx.restore()
        this.drawTimeTxt(ctx, x4, y4, i)
      }
      for (let i = 0; i < 60; i++) {
        let angel = -90 + i * 6
        let [x2, y2] = [x1 + Math.cos(angel * Math.PI / 180) * L3, y1 + Math.sin(angel * Math.PI / 180) * L3]
        let [x3, y3] = [x1 + Math.cos(angel * Math.PI / 180) * L4, y1 + Math.sin(angel * Math.PI / 180) * L4]
        ctx.fill()
        ctx.save()
        ctx.beginPath()
        ctx.lineWidth = this.minSize * 0.01;
        ctx.lineJoin = "round";
        ctx.strokeStyle = this.fontColor;
        ctx.moveTo(x2, y2);
        ctx.lineTo(x3, y3);
        ctx.closePath()
        ctx.stroke()
        ctx.restore()
      }
      let oDate = new Date()
      let oHours = oDate.getHours()
      let oMin = oDate.getMinutes()
      let oSen = oDate.getSeconds()
      let oHoursValue = (-90 + oHours * 30 + oMin / 2) * Math.PI / 180
      let oMinValue = (-90 + oMin * 6) * Math.PI / 180
      let oSenValue = (-90 + oSen * 6) * Math.PI / 180
      let oSenDotted = (-90 - 180 + oSen * 6) * Math.PI / 180


      this.drawTimeNeedle(ctx, this.minSize * 0.04, this.minSize / 2 * 0.5, oHoursValue, this.fontColor)
      this.drawTimeNeedle(ctx, this.minSize * 0.02, this.minSize / 2 * 0.65, oMinValue, this.fontColor)
      this.drawTimeNeedle(ctx, this.minSize * 0.01, this.minSize / 2 * 0.8, oSenValue, "#e67e22")
      this.drawSecondDotted(ctx, oSenDotted, "#e67e22") //绘制秒针尾部

      ctx.save()
      ctx.beginPath()
      ctx.fillStyle = "#e67e22"
      ctx.shadowBlur = 2;
      ctx.shadowColor = "#000"
      ctx.arc(this.minSize / 2, this.minSize / 2, this.minSize * 0.04, 0, 360 * Math.PI / 180)
      ctx.fill()
      ctx.closePath()
      ctx.restore()
    },
    init() {
      // 获取元素
      const element = document.querySelector('html');
      // 获取CSS变量值
      this.fontColor = getComputedStyle(element).getPropertyValue('--font-color');
      this.shadowColor = getComputedStyle(element).getPropertyValue('--card-background-color');
    },
    resize() {
      this.$nextTick(() => {
        setTimeout(
            () => {
              this.width = this.$refs['a-c'].parentElement.clientWidth - 10
              this.height = this.$refs['a-c'].parentElement.clientHeight - 10
              this.minSize = Math.min(this.width, this.height)
              this.$refs.canvas.width = this.minSize
              this.$refs.canvas.height = this.minSize
              this.drawTime()
            }, 50
        )
      })
    }
  },
  mounted() {
    this.resize();
    this.init();
    setInterval(() => {
      this.drawTime();
    }, 20);

    // 监听 theme-changed 事件
    bus.on('setting-changed', () => {
      this.init();
    });
    bus.on('resize-component', (v) => {
      if (v === 'time') {
        this.resize();
      }
    });
  },
  beforeUnmount() {
    // 移除事件监听
    bus.off('setting-changed');
    bus.off('resize-component');
  },
}

</script>

<style lang="less" scoped>
.content {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
}
</style>